<template>
  <mu-row>
    <div v-if="viewPic !== ''">
      <img @click="openDialog = !openDialog" class="pad5 bdso" style="max-width: 300px;" alt="image" :src="viewPic" v-if="$com.isTrue(value)"/>
    </div>
    <div>
      <input style="display: none" type="file" ref="fileInput" @change="upload(name)">
      <mu-button @click="selectPic(name)" color="primary">
        选择
        <mu-icon right value="cloud_upload"></mu-icon>
      </mu-button>
    </div>
    <!--    隐藏项目-->
    <mu-dialog title="预览" :open.sync="openDialog" scrollable>
      <img :src="viewPic" alt="" style="width: 100%">
      <mu-button slot="actions" flat color="primary" @click="openDialog = false">关闭</mu-button>
    </mu-dialog>
  </mu-row>
</template>

<script>
import api from '@/assets/js/api'

export default {
  name: "pic",
  props: {
    name: '',
    value: ''
  },
  data () {
    return {
      viewPic: "",
      openDialog: false,
    }
  },
  mounted () {
    this.viewPic = api.getUrl() + this.value
  },
  methods: {
    selectPic (refName) {
      console.log(this.$refs.fileInput)
      this.$refs.fileInput.dispatchEvent(new MouseEvent("click"))
    },
    upload (refName) {
      let _this = this
      let files = this.$refs.fileInput.files
      console.log(files)
      api.upload(files[0], function (res) {
        if (res.s == 1) {
          _this.viewPic = api.getUrl() + res.d
          console.log(res)
          _this.$emit('change', res.d)
        }
      })
    }

  }
}
</script>

<style scoped>

</style>
